<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="not-ie" lang="en"> <!--<![endif]-->
    <head>
        <!-- Basic Meta Tags -->
        <meta charset="utf-8">
        <title>Ecommerce</title>
        <meta name="description" content="your description">
        <meta name="keywords" content="your keywords">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Favicon -->
        <link href="img/favicon.png" rel="icon" type="image/png">
        <!-- Bootstrap css -->
        <link href="css/bootstrap.min.css" rel="stylesheet">  
        <!-- Flexslider css -->
        <link href="css/flexslider.css" rel="stylesheet">
        <!-- Nivo slider css -->
        <link href="css/nivo-slider.css" rel="stylesheet">
        <!-- Pretty Photo -->
        <link href="css/prettyPhoto.css" rel="stylesheet">  
        <!-- Font Awesome css -->
        <link href="css/font-awesome.min.css" rel="stylesheet">
        <!-- Custom Scrollbar css -->
        <link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" />
        <!-- Animate css -->    
        <link href="css/animate.css" rel="stylesheet">
        <!-- Refine slider -->
        <link href="css/refineslide.css" rel="stylesheet">  
        <!-- Theme css -->    
        <link href="css/style.css" rel="stylesheet" id="bg">   
        <!-- Default color css -->
        <link href="css/colors/blue.css" rel="stylesheet" id="color">
        <!-- Bootstrap override css -->               
        <link href="css/bootstrap-override.css" rel="stylesheet">

        <!-- Google Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>

        <!-- Internet Explorer condition - HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
                <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->   

    </head>       
    <body>
        <!-- Header -->
        <header id="header">
            <c:if test="${!empty usuario.nome}">
                nao ta logado
            </c:if>
            <div class="container">   
                <div class="row spacer40"></div>    
                <div class="row">
                    <div class="span12">
                        <div class="head-info">
                            Telefone: (xxx) xxxx xxxx
                            <div class="money">            
                                <a href="#" class="shop-header-links">Minha Conta</a>
                            </div>  
                        </div>        
                    </div>
                </div>
                <div class="row spacer40"></div>
                <div class="row">
                    <div class="span8">
                        <div class="logo"> <!-- Logo -->
                            <a href="index.jsp"><div class="logo-picture"></div></a> <!-- Logo link and logo image -->
                            <div class="logo-text"><span class="color-dark"><u>Ecommerce</u></span></div> <!-- text next to logo -->
                        </div>            
                    </div>
                    <c:if test="${empty usuario.nome}">
                        <!-- essa parte pega os dados da quantidade de produtos que o cliente comprou e exibe no carrinho de compras...
                             so mostra se o usuario estiver logado -->
                        <div class="span4 pull-right">
                            <div class="shop-cart-header">
                                <div class="shop-cart-header-text">35 $<br>
                                    <span class="shop-cart-header-text-2">4 items</span></div>
                                <div class="shop-cart-header-logo"><a href="checkout.jsp"><i class="icon-shopping-cart"></i></a></div>
                            </div>
                        </div>
                    </c:if>
                </div>   
                <div class="row">
                    <div class="span12">
                        <!-- Main navigation -->
                        <nav class="navbar">
                            <ul class="nav pull-right" id="nav">
                                <li class="active"><a href="index.jsp" title="Home">Inicio</a></li>
                                <li><a href="shop.jsp" title="Shop">Shows</a>
                                    <c:if test="${empty usuario.nome}">
                                        <ul><!-- Sub menu -->             
                                            <li><a href="checkout.jsp" title="Checkout">Carrinho</a></li>
                                        </ul><!-- Sub menu end-->            
                                    </c:if>
                                </li>            
                                <li><a href="#" title="Contact">Contato</a></li>
                            </ul>
                        </nav><!-- Main navigation end-->
                    </div>
                </div>
        </header>
        <!-- header end -->

        <!-- Section -->
        <section id="section">
            <div class="container">
                <div class="row">
                    <div class="span12">
                        <ul class="breadcrumb left">
                            <li><a href="index.jsp">Home</a><span class="divider">/</span></li>
                            <li><a href="shop.jsp">Shop</a><span class="divider">/</span></li>
                            <li><a href="#">Category</a><span class="divider">/</span></li>
                            <li class="active">Product</li>
                        </ul>      
                    </div>      
                </div>

                <div class="row">
                    <div class="span6 shop-item-container">

                        <li>
                            <a href="img/shop-item-1.jpg" data-rel="prettyPhoto" title="some text">
                                <img src="img/shop-item-1.jpg" alt="" />
                            </a>
                        </li>
                        <div class="row spacer40"></div>

                    </div>

                    <div class="span6">
                        <h2 class="item-name">Name of the product</h2>
                        <h1 class="item-price">From: 45$</h1>
                        <div class="row spacer15"></div>
                        <div class="rating-shop-item">
                            <span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
                        </div>
                        <h4>Product description</h4>
                        <p>Donec ullamcorper dolor at dui semper vehicula. Aenean hendrerit in eros vitae bibendum. Praesent congue, neque id mattis pretium, leo quam faucibus augue, at tincidunt ipsum felis et enim. Mauris pellentesque, turpis ac luctus gravida.
                        </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies erat quis leo ornare suscipit. Nulla a dignissim neque. In ac hendrerit odio, sit amet porta sapien.
                        </p>        
                        <p>Donec ullamcorper dolor at dui semper vehicula. Aenean hendrerit in eros vitae bibendum. Praesent congue, neque id mattis pretium, leo quam faucibus augue, at tincidunt ipsum felis et enim.
                        </p>

                        <button class="btn btn-style-2 btn-color-1-border-text pull-right" type="button"><i class="icon-shopping-cart"></i> Comprar</button>
                    </div>

                    <div class="row spacer40"></div>

                    <div class="row"><div class="span12"><h2>Shows</h2></div></div>
                    <div class="row spacer20"></div>

                    <div class="top-nav-shop-slider">
                        <ul class="slides">
                            <li>
                                <div class="shop-item-shortcode">
                                    <div class="img-container-shop">
                                        <div class="border-top"></div>        
                                        <div class="img-container-image-shop">
                                            <a href="img/shop-item-1.jpg" data-rel="prettyPhoto" title="Product description">
                                                <img src="img/shop-item-1.jpg" alt="lorem">
                                            </a>                                                               
                                        </div>
                                        <div class="img-container-text">
                                            <h4><a href="shop.jsp">Shop item 1</a></h4>
                                        </div>
                                        <div class="shop-item-bottom">
                                            <div class="shop-item-price">
                                                <h5>1.756,40 $</h5>
                                            </div>
                                            <div class="shop-item-add-to-cart">
                                                <a href="#"><div class="shop-item-add-to-cart-text">
                                                        ADD <i class="icon-shopping-cart"></i>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="border-bottom"></div>
                                    </div>         
                                </div>
                            </li> 
                            <li>
                                <div class="shop-item-shortcode">
                                    <div class="img-container-shop">
                                        <div class="border-top"></div>        
                                        <div class="img-container-image-shop">
                                            <a href="img/shop-item-3.jpg" data-rel="prettyPhoto" title="Product description">
                                                <img src="img/shop-item-3.jpg" alt="lorem">
                                            </a>                                                               
                                        </div>
                                        <div class="img-container-text">
                                            <h4><a href="shop.jsp">Shop item 3</a></h4>
                                        </div>
                                        <div class="shop-item-bottom">
                                            <div class="shop-item-price">
                                                <h5>1.756,40 $</h5>
                                            </div>
                                            <div class="shop-item-add-to-cart">
                                                <a href="#"><div class="shop-item-add-to-cart-text">
                                                        ADD <i class="icon-shopping-cart"></i>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="border-bottom"></div>
                                    </div>         
                                </div>
                            </li> 
                        </ul>
                    </div>
                    <div class="row spacer50"></div>
                </div>
        </section>
        <!-- Section end -->


        <!-- Footer -->
        <footer id="footer">

            <div class="container footer">
                <div class="row">
                    <div class="span4 offset4">
                        <div class="contact"><h3><a href="#">Contato</a></h3></div>
                        <div class="border-bottom"></div>
                    </div>
                </div>
                <div class="row spacer40"></div>
                <div class="row">
                    <div class="span3">
                        <div class="logo">
                            <a href="index-2.html"><div class="logo-picture"></div></a> <!-- Logo link and logo image -->
                        </div> 
                    </div>
                    <div class="span3">
                        <h4>GET IN TOUCH</h4>
                        <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc. Claritas est etiam processus dynamicus.
                        </p>
                    </div>
                    <div class="span3">
                        <h4>ADDRESS</h4>
                        <p>2701 San Tomas Expressway<br>
                            Santa Clara, CA 95050<br>
                            Tel: 1+(408) 486-2000<br>
                            Fax: 1+(408) 486-2200<br>
                            <a href="mailto:exapmple@example.com">bruno.jovani@bruno.com</a>
                        </p>
                    </div>
                    <div class="span3">
                        <h4>FOLLOW US</h4>
                        <p>
                            <a href="#" class="social-icon-main"><i class="icon-facebook" title="facebook"></i></a>
                            <a href="#" class="social-icon-main"><i class="icon-google-plus" title="google +"></i></a>
                            <a href="#" class="social-icon-main"><i class="icon-twitter" title="twitter"></i></a> 
                            <a href="#" class="social-icon-main"><i class="icon-skype" title="skype"></i></a> 
                            <a href="#" class="social-icon-main"><i class="icon-linkedin" title="linkedin"></i></a>
                            <a href="#" class="social-icon-main"><i class="icon-dribbble" title="dribbble"></i></a>
                            <a href="#" class="social-icon-main"><i class="icon-pinterest" title="pinterest"></i></a>
                            <a href="#" class="social-icon-main"><i class="icon-flickr" title="flickr"></i></a>
                            <a href="#" class="social-icon-main"><i class="icon-tumblr" title="tumblr"></i></a>
                            <a href="#" class="social-icon-main"><i class="icon-youtube" title="youtube"></i></a>                                         
                        </p>          
                    </div>        
                </div>
            </div> <!-- row end -->
        </div> <!-- footer container end --> 
    </footer>
    <!-- Footer End -->

    <!-- Javascript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.easing.js"></script> 
    <script src="js/jquery.flexslider-min.js"></script>
    <script src="js/jquery.nivo.slider.pack.js"></script> 
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/jquery.mCustomScrollbar.concat.min.js"></script> 
    <script src="js/jquery.prettyPhoto.js"></script>    
    <script src="js/animate.js"></script>
    <script src="js/jquery.fitvids.js"></script>
    <script src="js/retina.js"></script>
    <script src="js/respond.min.js"></script>  
    <script src="js/jquery.parallax-1.1.3.js"></script>
    <script src="js/jquery.refineslide.js"></script>
    <script src="js/selectnav.js"></script>     
    <script src="js/functions.js"></script> 

</body>
</html>